<template>
  <div v-if="jbTable === true">
    <el-table
      :data="tabledata"
      :height="tableHeight"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="80"
        align="center"
        :key="Math.random()"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :prop="item.prop"
        :key="index"
        :label="item.label"
        align="center"
      >
      </el-table-column>

      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >
          <!-- 
            <el-button
            v-if="activeName === 'first'"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="activeName === 'second'"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >

          <el-button
            v-else-if="activeName === 'third'"
            size="mini"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            v-else-if="activeName === 'fourth' || activeName === 'five'"
            size="mini"
            type="danger"
            @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="处理表单" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item
          label="处理措施"
          :label-width="formLabelWidth"
          prop="measures"
        >
          <el-select
            v-model="form.measures"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in measuresList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="整改期限"
          :label-width="formLabelWidth"
          prop="rectification"
        >
          <el-select
            v-model="form.rectification"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in rectificationList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="处理说明" :label-width="formLabelWidth" prop="gBz">
          <el-input
            type="textarea"
            v-model="form.gBz"
            class="resizeNone"
            placeholder=""
          ></el-input>
        </el-form-item> -->

        <el-form-item style="text-align: center">
          <el-button type="success" @click="onSubmit('form')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="处理复核" :visible.sync="Dialog" width="50%">
      <el-form
        ref="shFormData"
        :model="shFormData"
        :rules="shFormDataRules"
        label-width="80px"
      >
        <el-form-item
          label="处理期限"
          :label-width="formLabelWidth5"
          prop="gKgsj"
        >
          <el-date-picker
            type="date"
            :picker-options="pickerOptions0"
            placeholder="请输入处理期限"
            v-model="shFormData.gKgsj"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>

        <el-form-item
          label="处理结果"
          :label-width="formLabelWidth5"
          prop="gCljg"
        >
          <el-select
            v-model="shFormData.gCljg"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in gCljgList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="整改后现场照片" :label-width="formLabelWidth5">
          <el-upload
            class="upload-demo"
            action=""
            :http-request="photoBox"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="imageJson"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item style="text-align: center">
          <el-button type="success" @click="Submit('shFormData')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div v-else-if="jbTable === false">
    <info-form
      :formData="formData"
      :jbTable="jbTable"
      @toBack="toBack"
      :gTmpId="gTmpId"
      :infoform="infoform"
      :activeName="activeName"
    ></info-form>
  </div>
</template>

<script>
import InfoForm from '@/views/backlog/components/infoForm'

import { tzzfindList, tzzfindById, queryUploadImage } from '@/api/grid'

export default {
  name: '',
  components: { InfoForm },
  props: {
    tableColumn: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: () => 0,
    },
    activeName: {
      type: String,
      default: () => 'first',
    },
  },
  data() {
    return {
      formLabelWidth: '100px',
      formLabelWidth5: '150px',
      tableHeight: '560', //表格高度
      measuresList: [
        {
          typeId: 1,
          typeName: '停工',
        },
        {
          typeId: 2,
          typeName: '回复原貌',
        },
        {
          typeId: 3,
          typeName: '补办手续',
        },
      ],
      rectificationList: [
        {
          typeId: 1,
          typeName: '3天',
        },
        {
          typeId: 2,
          typeName: '5天',
        },
        {
          typeId: 3,
          typeName: '10天',
        },
      ],
      gCljgList: [
        {
          typeId: 1,
          typeName: '按期整改完成',
        },
        {
          typeId: 2,
          typeName: '整改中',
        },
        {
          typeId: 3,
          typeName: '未整改',
        },
      ],
      pageNum: 1,
      pageSize: 10,
      // total: 0,
      jbTable: true,
      formData: {
        //公众信息采集表单反显数据
        // gIllegalType: '',
        gConstructionType: '1',
        // // illegalBuilding: '2',
        // gConstruction: '3',
        // gMainName: '主体名称',
        // gProgress: '3',
        // gDescribe: '情况描述',
      },
      dialogVisible: false,
      Dialog: false,
      form: {
        measures: '',
        rectification: '',
        gBz: '',
      },
      rules: {
        measures: [
          { required: true, message: '请输入处理措施', trigger: 'blur' },
        ],
        rectification: [
          { required: true, message: '请输入整改期限', trigger: 'blur' },
        ],
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        },
      },
      shFormData: {
        gKgsj: '',
        gCljg: '',
      },
      shFormDataRules: {
        gKgsj: [{ required: true, message: '请输入处理措施', trigger: 'blur' }],
        gCljg: [{ required: true, message: '请输入整改期限', trigger: 'blur' }],
      },
      imageJson: [
        {
          name: 'food.jpeg',
          url:
            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
        {
          name: 'food2.jpeg',
          url:
            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
      ],
      qzjbList: [], //群众举报list
      gTmpId: '',
      infoform: 'InformationCollection', //切换表单
    }
  },
  computed: {
    // total: {
    //   get() {
    //     return this.tableData.total
    //   },
    //   set(v) {
    //     return v
    //   },
    // },
    tabledata: {
      get() {
        return this.tableData
      },
      set(v) {
        // console.log(v)
        return v
      },
    },
  },
  watch: {},
  beforeCreate() {},
  created() {
    // this.total = this.tableData.total
  },
  beforeMount() {
    // this.publicList()

    // 表格留白
    this.tableHeight = document.documentElement.clientHeight - 163

    this.qzjbList = this.tableData
  },
  mounted() {
    // this.qzjbList = this.tableData
    // console.log(this.qzjbList)
    // console.log(this.tableData)
    // this.total = this.tableData.total
    // console.log(this.total)
  },
  methods: {
    toSecond() {
      this.activeName = 'second'
    },
    // 公共举报
    publicList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // tzzfindList({ pageNum: this.pageNum, pageSize: this.pageSize })
      tzzfindList()
        .then((res) => {
          loading.close()
          // this.$message({
          //   message: res.message,
          //   type: 'success',
          // })
          this.qzjbList = res.data.list
          // this.qzjbList.gCrtDt = res.data.list.gCrtDt.substring(0, 9)
          res.data.list.forEach((v, i) => {
            // console.log(v, i)
            this.qzjbList[i].gCrtDt = v.gCrtDt.substring(0, 10)
          })
          this.total = res.data.total
        })
        .catch((err) => {
          loading.close()
          console.log(err)
        })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    photoBox(params) {
      const file = params.file
      const forml = new FormData()
      // 文件对象
      forml.append('file', file)
      // 本例子主要要在请求时添加特定属性，所以要用自己方法覆盖默认的action
      // form.append('clientType', 'xxx')
      // 项目封装的请求方法，下面做简单介绍
    },
    toBack() {
      // this.infoform = 'InformationCollection'
      this.jbTable = true

      if (this.activeName === 'first' && this.glevel === 2) {
        this.jbTable = true
        location.reload()
      } else if (this.activeName === 'second' && this.glevel !== 2) {
        this.jbTable = true
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.toPage()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.pageNum = val
      this.toPage()
    },

    toPage() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // tzzfindList({ pageNum: this.pageNum, pageSize: this.pageSize })
      tzzfindList({})
        .then((res) => {
          loading.close()
          // this.$message({
          //   message: res.message,
          //   type: 'success',
          // })
          // console.log(res.data.list)
          // this.tableData = res.data.list
          this.$emit('page', res.data.list)
          // console.log(this.tabledata)
          // this.qzjbList.gCrtDt = res.data.list.gCrtDt.substring(0, 9)

          this.total = res.data.total
        })
        .catch((err) => {
          loading.close()
          console.log(err)
        })
    },

    // 查看
    handleEdit(index, row) {
      // console.log(index, row)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      let glevel = JSON.parse(sessionStorage.userInfo).glevel
      this.gTmpId = row.gTmpId

      if (
        this.activeName === 'second' ||
        this.activeName === 'third' ||
        this.activeName === 'fourth' ||
        this.activeName === 'five'
      ) {
        row.gId = row.gId
        this.gTmpId = row.gTmpId
        this.infoform = 'PatrolProblem'
      }
      tzzfindById({ gInstId: row.gId, gTmpId: row.gTmpId })
        .then((res) => {
          loading.close()
          // console.log(res)
          // 群众举报
          if (this.activeName === 'first' && glevel === 2) {
            if (res.data[102]) {
              this.formData = res.data[102][0]

              // 有照片显示
              if (res.data[102][0].gImgeId) {
                let gImgeId = res.data[102][0].gImgeId.split(',')
                // console.log(gImgeId)
                this.formData.imageJson = []
                gImgeId.forEach((v, i) => {
                  queryUploadImage({ id: v })
                    .then((res) => {
                      // console.log(res.data)
                      // url.push(res.data)
                      this.formData.imageJson.push({
                        url: ' data:text/css;base64,' + res.data,
                      })
                      this.infoform = 'PatrolProblem'
                    })
                    .catch((err) => {
                      loading.close()
                      console.log(err)
                    })
                })
              }

              // console.log(this.formData)
            } else {
              this.formData = res.data['103xs'][0]
              this.formData['103xs'] = 'laiyuansb'
            }
          }
          // else if (this.activeName === 'first' && glevel !== 2) {
          //   this.formData = res.data['103xs'][0]
          //   this.infoform = 'PatrolProblem'
          // }
          // 村的我的巡视
          else if (this.activeName === 'second' && glevel === 2) {
            this.formData = res.data['103xs'][0]
            this.infoform = 'PatrolProblem'
          }
          // 下级反馈
          else if (this.activeName === 'second' && glevel !== 2) {
            this.formData = res.data['103cl'][0]

            // 有照片显示
            if (res.data['103cl'][0].gImgeId) {
              let gImgeId = res.data['103cl'][0].gImgeId.split(',')
              // console.log(gImgeId)
              this.formData.imageJson = []
              gImgeId.forEach((v, i) => {
                queryUploadImage({ id: v })
                  .then((res) => {
                    // console.log(res.data)
                    // url.push(res.data)
                    this.formData.imageJson.push({
                      url: ' data:text/css;base64,' + res.data,
                    })
                    this.infoform = 'PatrolProblem'
                  })
                  .catch((err) => {
                    loading.close()
                    console.log(err)
                  })
              })
            }

            // 处理没有信息gId 4-15
            // this.formData = res.data['103xs'][0]
            // this.formData.gId = res.data['103cl'][0].gId
            // 处理措施
            this.formData.gClcs = res.data['103cl'][0].gSource
            this.infoform = 'PatrolProblem'
            if (this.formData.gDueTime) {
              // this.formData.gDueTime.substring(0, 10)
              this.formData.gDueTime = this.utilChangeDate(
                this.formData.gDueTime
              )
              // console.log(this.formData.gDueTime)
            }
            // console.log(this.formData.gDueTime)
          }
          // 整改到期
          else if (this.activeName === 'third') {
            this.formData = res.data['103cl'][0]

            // 有照片显示
            if (res.data['103cl'][0].gImgeId) {
              let gImgeId = res.data['103cl'][0].gImgeId.split(',')
              // console.log(gImgeId)
              this.formData.imageJson = []
              gImgeId.forEach((v, i) => {
                queryUploadImage({ id: v })
                  .then((res) => {
                    // console.log(res.data)
                    // url.push(res.data)
                    this.formData.imageJson.push({
                      url: ' data:text/css;base64,' + res.data,
                    })
                    this.infoform = 'PatrolProblem'
                  })
                  .catch((err) => {
                    loading.close()
                    console.log(err)
                  })
              })
            }

            this.infoform = 'PatrolProblem'
            if (this.formData.gDueTime) {
              // this.formData.gDueTime.substring(0, 10)
              this.formData.gDueTime = this.utilChangeDate(
                this.formData.gDueTime
              )
              // console.log(this.formData.gDueTime)
            }
          }
          //  上级督办
          else if (this.activeName === 'fourth') {
            this.formData = res.data['103cl'][0]
            this.infoform = 'PatrolProblem'

            // 有照片显示
            if (res.data['103cl'][0].gImgeId) {
              let gImgeId = res.data['103cl'][0].gImgeId.split(',')
              // console.log(gImgeId)
              this.formData.imageJson = []
              gImgeId.forEach((v, i) => {
                queryUploadImage({ id: v })
                  .then((res) => {
                    // console.log(res.data)
                    // url.push(res.data)
                    this.formData.imageJson.push({
                      url: ' data:text/css;base64,' + res.data,
                    })
                    this.infoform = 'PatrolProblem'
                  })
                  .catch((err) => {
                    loading.close()
                    console.log(err)
                  })
              })
            }

            this.formData.guideNote = res.data['103cl'][0].gGuideNote
            if (this.formData.gDueTime) {
              // this.formData.gDueTime.substring(0, 10)
              this.formData.gDueTime = this.utilChangeDate(
                this.formData.gDueTime
              )
              // console.log(this.formData.gDueTime)
            }
          }
          // 已处理
          else if (this.activeName === 'five') {
            this.formData = res.data['103cl'][0]
            this.infoform = 'PatrolProblem'

            // 有照片显示
            if (res.data['103cl'][0].gImgeId) {
              let gImgeId = res.data['103cl'][0].gImgeId.split(',')
              // console.log(gImgeId)
              this.formData.imageJson = []
              gImgeId.forEach((v, i) => {
                queryUploadImage({ id: v })
                  .then((res) => {
                    // console.log(res.data)
                    // url.push(res.data)
                    this.formData.imageJson.push({
                      url: ' data:text/css;base64,' + res.data,
                    })
                    this.infoform = 'PatrolProblem'
                  })
                  .catch((err) => {
                    loading.close()
                    console.log(err)
                  })
              })
            }

            // 处理措施
            this.formData.gClcs = res.data['103cl'][0].gSource
            if (this.formData.gDueTime) {
              // this.formData.gDueTime.substring(0, 10)
              this.formData.gDueTime = this.utilChangeDate(
                this.formData.gDueTime
              )
              // console.log(this.formData.gDueTime)
            }
          }
          // console.log(this.infoform)
          this.jbTable = false
        })
        .catch((err) => {
          loading.close()
          console.log(err)
        })
    },
    utilChangeDate(dateStr) {
      if (!dateStr) {
        return ''
      }
      var date = new Date(dateStr)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      return y + '-' + m + '-' + d
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    Submit(foshFormDatarm) {
      this.$refs[foshFormDatarm].validate((valid) => {
        if (valid) {
          console.log(this.shFormData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss">
.el-dialog {
  .el-dialog__body {
    //border-top: 1px solid #dcdfe6;
    //border-bottom: 1px solid #dcdfe6;
    max-height: 500px !important;
    min-height: 100px;
    overflow-y: auto;
  }
}
</style>

<style scoped lang="scss">
.el-pagination {
  padding-top: 10px;
}
</style>
